<template>
  <el-tabs>
    <el-tab-pane label="基本信息">
      <el-card>
        <el-row :gutter="20">
          <!-- 左半边：基本信息 -->
          <el-col :span="12">
            <el-descriptions title="充电桩基本信息" :column="2" border>
              <el-descriptions-item label="名称"
              >{{ viewData.pileName || "未填写" }}
              </el-descriptions-item
              >
              <el-descriptions-item label="编号"
              >{{ viewData.pileCode || "未填写" }}
              </el-descriptions-item
              >
              <el-descriptions-item label="类型"
              >{{ viewData.pileType || "未填写" }}
              </el-descriptions-item
              >
              <el-descriptions-item label="功率(kW)"
              >{{ viewData.pilePower || 0 }}
              </el-descriptions-item
              >
              <el-descriptions-item label="状态"
              ><span
                  :style="{ color: viewData.pileStatus === '空闲中' ? 'green' : 'red' }"
              >{{ viewData.pileStatus || '未知' }}</span
              ></el-descriptions-item
              >
              <el-descriptions-item label="型号"
              >{{ viewData.pileModel || '未填写' }}
              </el-descriptions-item
              >
            </el-descriptions>
          </el-col>

          <!-- 右半边：电站图片 -->
          <el-col :span="12">
            <div>
              <h3>电站图片</h3>
              <div class="image-container">
                <img
                    v-if="imageFileList.length > 0"
                    :src="imageFileList[0].url"
                    alt="电站图片"
                />
                <p v-else>暂无图片</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 20px">
          <h3>描述</h3>
          <p>{{ viewData.pileDesc || "暂无描述" }}</p>
        </div>
      </el-card>
    </el-tab-pane>

    <el-tab-pane label="充电枪列表">
      <el-card>
        <el-table :data="viewData.chargingGuns" style="width: 100%" border>
          <el-table-column prop="gunName" label="充电枪名称"/>
          <el-table-column prop="gunCode" label="充电枪编号"/>
          <el-table-column prop="gunType" label="充电枪类型"/>
          <el-table-column prop="outputPower" label="输出功率(kW)"/>
          <el-table-column prop="remark" label="备注"/>
        </el-table>
      </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {computed, ref, watch} from 'vue';
import {marked} from 'marked';

export default {
  name: 'PileDetail',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    viewData: {
      type: Object,
      required: true,
    },
  },
  emits: ['update:visible'],
  setup(props, {emit}) {
    const imageFileList = computed(() => {
      return props.viewData.pileImgUrl
          ? [{name: '电站图片', url: props.viewData.pileImgUrl}]
          : []
    })

    const renderedMarkdown = computed(() => {
      return marked(props.viewData.pileDesc || '');
    });

    // 同步弹窗的 visible
    const visible = ref(props.visible);
    watch(
        () => props.visible,
        (val) => {
          visible.value = val;
          console.log('props.viewData.pileImgUrl:', props.viewData.pileImgUrl);
          if (val) {
            // 当查看弹窗打开时，把图片赋值
            if (props.viewData.pileImgUrl) {
              imageFileList.value = [
                {name: '电桩图片', url: props.viewData.pileImgUrl},
              ];
            } else {
              imageFileList.value = [];
            }
            console.log('Updated imageFileList:', imageFileList.value);
          }
        },
        {immediate: true}
    );

    watch(
        () => visible.value,
        (val) => {
          emit('update:visible', val);
        }
    );

    return {
      visible,
      imageFileList,
      renderedMarkdown,
    };
  },
};
</script>

<style scoped>
.image-container {
  width: 200px; /* 调整宽度 */
  height: 150px; /* 调整高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f7f7f7;
  margin: auto; /* 居中显示 */
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持比例 */
}
</style>

